// 引入path，主要用来拼接路径
const path = require('path');
// 引入html-webpack-plugin，主要用来生成html文件
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 引入clean-webpack-plugin，主要用来删除dist目录
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

// webpack中所有配置信息都应该写在module.exports中
module.exports = {
    // 设置模式为开发模式
    mode: 'development',
    // 入口文件
    entry: './src/index.ts',
    // 输出文件
    output: {
        // 打包后的文件
        filename: 'bundle.js',
        // 打包文件的目录
        path: path.resolve(__dirname, 'dist')
    },
    // 打包时使用的模块
    module: {
        // 指定要加载的规则
        rules: [
            {
                // 指定规则要生效的文件
                test: /\.ts$/,
                // 指定要使用的loader
                use: [
                    // 配置babel
                    {
                        // 指定加载器
                        loader: 'babel-loader',
                        // 配置babel
                        options: {
                            // 指定babel的预设
                            presets: [
                                [
                                    // 指定环境插件
                                    '@babel/preset-env',
                                    // 配置信息
                                    {
                                        // 指定兼容性浏览器
                                        targets: {
                                            "chrome": "58",
                                            "ie": "11"
                                        },
                                        // 指定corejs版本
                                        "corejs": "3",
                                        // 指定使用corejs的方式
                                        "useBuiltIns": "usage",//按需加载
                                    }
                                ]
                            ]
                        }
                    },
                    'ts-loader',
                ],
                // 指定要排除的文件
                exclude: /node_modules/
            },
            {
                test: /\.scss$/,
                use: [
                    'style-loader',
                    'css-loader',
                    // 引入postcss-loader
                    {
                        loader: 'postcss-loader',
                        options: {
                            postcssOptions: {
                                plugins: [
                                    require('postcss-preset-env')({
                                        browsers: 'last 2 versions'
                                    })
                                ]
                            }
                        }
                    },
                    'sass-loader'
                ]
            }
        ]
    },
    // 配置插件
    plugins: [
        new HtmlWebpackPlugin({
            // 网页标题
            // title: 'TS学习',
            // 指定要生成的文件
            template: './src/index.html'
        }),
        new CleanWebpackPlugin()
    ],
    // 用来设置引用模块的扩展名
    resolve: {
        extensions: ['.ts', '.js'] // 表示以ts和js结尾的文件都可以作为模块引用
    }
}